<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="AK">
    <meta name="Keywords" content="WEB,IT,前端">
    <meta name="Description" content="">
    <meta http-equiv="Cache-Control" content="max-age-0">
    <meta http-equiv="refresh" content="555">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <link rel="icon" href="/mylogo32.ico">
    <link rel="stylesheet" type="text/css" href="/bootstrap-v3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/jquery-ui/css/jquery-ui.css">
    <link rel="stylesheet" href="/layui-v2.2.6/layui/css/layui.css">
    <link rel="stylesheet" href="/common.css"> 
    <!-- [if lt IE 9] -->
    <script type="text/javascript" src="/html5shiv.min.js"></script>
    <script type="text/javascript" src="/respond.min.js"></script>
    <!-- [endif] -->
    <!-- http://www.huangyun.xyz -->
    <style type="text/css">
    #body1 {
        background: #ffffff;
        color: #f00;
    }
    </style>
    <title> AK </title>
</head>

<body id="body1" onfocus="changeBgColorClk1()">
    <div id="localtime"></div>
    <div id="app">
        <todo-box></todo-box>
    </div>
    <script type="text/javascript" src="/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/bootstrap-v2.3.2/js/bootstrap.js"></script>
    <script type="text/javascript" src="/jquery-ui/js/jquery-ui.js"></script>
    <script src="/layui-v2.2.6/layui/layui.js"></script>
    <script type="text/javascript" src="/vuejs/vue-v2.5.16.js"></script>  
    <script type="text/javascript" src="/less.js-2.5.3/dist/less.js"></script>
    <script type="text/javascript" src="/AK.js"></script>
    <script>
    	var bus = new Vue()
    	Vue.component("todo-box",{
    		template:`<form @submit.prevent>
				<todo-input></todo-input>
				<todo-list></todo-list>
    		</form>`
    	});
    	Vue.component("todo-input",{
    		data:function () {
    			return {
    				thing:""
    			}
    		},
    		template:`<div>
				<h2>等待做的事</h2>
				<input type="text" v-model="thing">
				<button @click="add">添加</button>
    		</div>`,
    		methods:{
    			add:function () {
    				bus.$emit("customEvent",this.thing)
    			}
    		}
    	});
    	Vue.component("todo-list",{
    		data:function () {
    			return {
    				myMsg:[]
    			}
    		},
    		template:`<ul>
				<todo-item 
					:cont="tmp" 
					v-for="(tmp,index) in myMsg"
					:key="index"></todo-item>
    		</ul>`,
    		mounted: function(){
    			bus.$on("customEvent", (msg)=> {
    				console.log(msg);
    				this.myMsg.push(msg)
    				console.log(this.myMsg)
    			})
    		}
    	})
    	Vue.component("todo-item",{
    		template:`<li>{{cont}}</li>`,
    		props:["cont"],
    		mounted:function () {
    			// console.log(this.cont+"-------")
    		}
    	})
        new Vue({
            el:"#app",
            data:{
                msg:"Hello"
            }
        })
    </script>
    
    <script>
    showtime();
    changeBgColor();
    </script>
</body>
</html>